Add HTMLImageElement for Material uniform #6729
Conversation
|
@hpinkos, thanks for the pull request! Maintainers, we have a signed CLA from @hpinkos, so you can review this at any time.
I am a bot who helps you make Cesium awesome! Contributions to my configuration are welcome. 🌍 🌎 🌏 |
|
@ggetz can you review? |
|
CHANGES? |
|
@mramato updated |
|
Also, can we add a unit test for this? And sorry if I'm being a little daft, but what is the use case that didn't work before? Can we at least have a Sandcastle link to test? |
|
@mramato it fixes this: var viewer = new Cesium.Viewer('cesiumContainer');
var image2 = new Image(100, 200);
image2.src = '../images/Cesium_Logo_Color.jpg';
var material = Cesium.Material.fromType('Image', {
image: '../images/Cesium_Logo_overlay.png'
});
viewer.scene.primitives.add(new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
geometry : new Cesium.RectangleGeometry({
rectangle : Cesium.Rectangle.fromDegrees(-120.0, 30.0, -110.0, 40.0),
vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
})
}),
appearance : new Cesium.EllipsoidSurfaceAppearance({
material : material
})
}));
Sandcastle.addToolbarButton('Change image', function() {
material.uniforms.image = image2;
});In master, the image doesn't change when you press the button. In this branch it does. |
|
I'm honestly not sure what the best way to write a unit test for this would be |
|
I think there's still a bug where updating the var viewer = new Cesium.Viewer('cesiumContainer');
var image = new Image(100, 200);
image.src = '../images/Cesium_Logo_Color.jpg';
var material = Cesium.Material.fromType('Image', {
image: image
});
viewer.scene.primitives.add(new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
geometry : new Cesium.RectangleGeometry({
rectangle : Cesium.Rectangle.fromDegrees(-120.0, 30.0, -110.0, 40.0),
vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
})
}),
appearance : new Cesium.EllipsoidSurfaceAppearance({
material : material
})
}));
Sandcastle.addToolbarButton('Change image', function() {
image.onload = function(){
material.uniforms.image = image;
};
image.src = '../images/Cesium_Logo_overlay.png';
}); |
|
Fair enough. |
Replaces #5857
From #5857: In order to make an animation by many images,we must know every image status in the process,so I change the timeline to the next time after the current image loaded.
material.uniforms.image = loadedImage;